<template>
<div id='contianer'>

         <!-- 预览文档 -->
    <el-dialog
      class="fullscreen_preview"
      :visible.sync="previewVisible"
      fullscreen
      center>
      <div slot="title" class="header_button">
      <img class="icon" @click="changeLike"
           :src="addForm.like==1?require('@/assets/images/heart_fill.png'):require('@/assets/images/heart.png')"/>
      <span>{{ addForm.likeNumber || '' }}</span>
      <img class="icon" @click="changeCollect()"
           :src="addForm.collect == 1?require('@/assets/images/collect_yes.png'):require('@/assets/images/collect_no.png')"/>
      <span>{{ addForm.collectNumber || '' }}</span>
    </div>
      <div class="main">
        <div class="file_box">
          <iframe
            v-loading="previewLoading"
            id="iframe"
            ref="iframe"
            src=""
            frameborder="0"
            width="100%"
            height="100%"
          ></iframe>
        </div>
        <div class="tag_box" v-if="navigationList.length>0">
          <h2>
            <span>知识导航条</span>
          </h2>
          <div
            v-for="tag in navigationList"
            :key="tag.node_id"
            class="navigation_item"
            :class="tag.node_id === activeTag.id ? 'tag_active' : ''"
            @click="handleNavigation(tag)"
          >
            {{ tag.text }}
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 预览视频 -->
    <el-dialog
      class="fullscreen_preview"
      :visible.sync="videoVideoVisible"
      fullscreen
      center>
      <div slot="title" class="header_button">
        <img class="icon" @click="changeLike"
             :src="addForm.like==1?require('@/assets/images/heart_fill.png'):require('@/assets/images/heart.png')"/>
        <span>{{ addForm.likeNumber || '' }}</span>
        <img class="icon" @click="changeCollect()"
             :src="addForm.collect == 1?require('@/assets/images/collect_yes.png'):require('@/assets/images/collect_no.png')"/>
        <span>{{ addForm.collectNumber || '' }}</span>
      </div>
      <div class="main">
        <div class="file_box">
          <div class="video_model">
            <div id="video"></div>
          </div>
        </div>
        <div class="tag_box">
          <h2>
            <span>知识导航条</span>
          </h2>
          <div
            v-for="tag in navigationList"
            :key="tag.node_id"
            class="navigation_item"
            :class="tag.node_id === activeTag.id ? 'tag_active' : ''"
            @click="handleNavigation(tag)"
          >
            {{ tag.text }}
          </div>
        </div>
      </div>
    </el-dialog>

</div>
</template>
<script>
export default {
data(){
return{
    previewVisible: false,
      previewLoading: false,
      videoVideoVisible: false,
}
}
}
</script>
<style lang='scss' scoped>
#contianer {
width: 100%;
height: 100%;
position:absolute
}
</style>